<div class="lv-time-picker-wrapper" [ngClass]="{ disabled: lvDisabled, active: open }">
  <div class="lv-time-picker-main">
    <input
      lv-input
      [ngModel]="displayValue"
      (ngModelChange)="setTimer($event)"
      (click)="onFocus($event)"
      (blur)="onBlur()"
      [readonly]="lvReadonly"
      [disabled]="lvDisabled"
      [placeholder]="lvPlaceholder"
    />
  </div>

  <!-- 删除icon -->
  <div class="lv-time-picker-clear" *ngIf="lvShowClear && !empty && !lvDisabled" (click)="clear()">
    <i lv-icon="lv-icon-clear" lvColorState="true"></i>
  </div>

  <!-- 下展icon -->
  <div class="lv-time-picker-operation" (click)="toggleOpen()">
    <i lv-icon="lv-icon-clock" [lvDisabled]="lvDisabled"></i>
  </div>
</div>

<!-- overlay -->
<ng-template #timePanelTpl>
  <lv-time-picker-panel
    [ngModel]="_value"
    [lvHeader]="lvHeader"
    [lvFooter]="lvFooter"
    [lvHourMode]="lvHourMode"
    [lvFormat]="lvFormat"
    [lvNowAsBaseTime]="lvNowAsBaseTime"
    [lvDisabledHour]="lvDisabledHour"
    [lvDisabledMinute]="lvDisabledMinute"
    [lvDisabledSecond]="lvDisabledSecond"
    (ngModelChange)="timerChange($event)"
    [lvOpenObserver]="_open$"
    [@showItem]="animationState"
    (@showItem.done)="onAnimationDone($event)"
  ></lv-time-picker-panel>
</ng-template>
